import React, { Component } from 'react'
import styles from './Home.module.css'
import SearchInput from "../searchInput/SearchInput"
import { withRouter } from 'react-router-dom'
import { Carousel } from 'antd-mobile'
import { getCarousel, getHomeSortLabel, getHomeGoodsLists } from '../../api/api'

class Home extends Component {
    state = {
        CarouselList: [],  //轮播图
        SortLabel: [],  //分类图标
        GoodsLists: []  //商品列表数据
    }
    // 跳转到商品详情页面
    goToGoodDetail = (goods_id) => {
        this.props.history.push("goodDetail/" + goods_id)
    }
    async componentDidMount() {
        let CarouselList = await getCarousel();  //获取轮播图
        let SortLabel = await getHomeSortLabel(); //获取分类图标
        let GoodsLists = await getHomeGoodsLists(); //获取商品列表数据
        // console.log(SortLabel)
        // console.log(GoodsLists)
        this.setState((preState) => {
            return {
                CarouselList: CarouselList.message,
                SortLabel: SortLabel.message,
                GoodsLists: GoodsLists.message
            }
        })
    }

    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    }
    render() {
        return (
            <div className={styles.ykHome}>
                {/* 首页标题 */}
                <div className={styles.ykHomeTitle}>
                    <span className={styles.title}>优酷商城</span>
                </div>
                {/* 首页搜索框的开始*/}
                <SearchInput></SearchInput>
                {/* 轮播图 */}
                <div className="yhHomeSwiper">
                    <Carousel
                        autoplay={true}
                        infinite
                    >
                        {this.state.CarouselList.map(val => (
                            <img
                                onClick={this.goToGoodDetail.bind(this, val.goods_id)}
                                src={val.image_src}
                                key={val.goods_id}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        ))}
                    </Carousel>
                </div>
                {/* 分页图标 */}
                <div className={styles.ykHomeCat}>
                    {
                        this.state.SortLabel.map((v) => {
                            return (<div className={styles.homeCatItem} key={v.image_src}>
                                <img src={v.image_src} alt="" />
                            </div>)
                        })
                    }
                </div>

                {/* 商品列表 */}
                <div className={styles.ykHomeList}>
                    {
                        this.state.GoodsLists.map((v) => {
                            return (
                                <div className={styles.homeListItem} key={v.floor_title.image_src}>
                                    {/* 标题 */}
                                    <div className={styles.listItemTitle}>
                                        <img src={v.floor_title.image_src} alt="" />
                                    </div>
                                    {/* 商品列表 */}
                                    <div className={styles.listItemPics}>
                                        {
                                            v.product_list.map((item) => {
                                                return (
                                                    <div className={styles.picItem} key={item.image_src}>
                                                        <img src={item.image_src} alt="" />
                                                    </div>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        )
    }
};

export default withRouter(Home);
